<template>
  <div class="exhibition-container">
    <!-- 轮播图 -->
    <van-swipe 
      class="exhibition-swiper" 
      :autoplay="3000" 
      :style="{ height: swiperHeight + 'px' }"
      indicator-color="white"
    >
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <img 
          class="banner-image" 
          :src="item.imageUrl" 
          @error="handleImageError"
        />
        <div class="banner-text-below">
          <div class="chinese-title">玉出昆冈</div>
          <div class="english-title">JADE FROM THE KUNLUN MOUNTAINS</div>
          <div class="chinese-subtitle">清代宫廷和田玉文化特展</div>
          <div class="english-subtitle">SYSTEM EXHIBITION ON HETIAN JADE CULTURE IN THE QING COURT</div>
          <div class="exhibition-info">
            <div class="date">2025.01.07-2026.01.04</div>
            <div class="location">展览地点：斋宫展厅</div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>

    <!-- 展览列表 -->
    <van-list
      v-model:loading="loading"
      :finished="noMore"
      finished-text="没有更多了"
      @load="loadExhibitions"
      class="exhibition-list"
    >
      <div 
        v-for="exhibition in exhibitions" 
        :key="exhibition.id" 
        class="exhibition-item"
        @click="navigateToDetail(exhibition.id)"
      >
        <van-image
          width="120"
          height="120"
          :src="exhibition.cover"
          fit="cover"
          class="exhibition-image"
          @error="handleImageError"
        >
          <template v-slot:error>加载失败</template>
        </van-image>
        <div class="exhibition-info">
          <div class="title">{{ exhibition.name }}</div>
          <div class="description">{{ exhibition.category }}</div>
          <div class="duration">{{ exhibition.activityTime }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Swipe, SwipeItem, List, Image as VanImage } from 'vant';

export default {
  name: 'ExhibitionList',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List,
    [VanImage.name]: VanImage
  },
  setup() {
    const router = useRouter();
    const swiperHeight = ref(400);
    const banners = ref([
      { imageUrl: '/static/index/banner/banner1.jpg', id: 1 },
      { imageUrl: '/static/index/banner/banner2.jpg', id: 2 },
      { imageUrl: '/static/index/banner/banner1.jpg', id: 3 }
    ]);
    const exhibitions = ref([]);
    const page = ref(1);
    const loading = ref(false);
    const noMore = ref(false);

    const calculateSwiperHeight = () => {
      try {
        swiperHeight.value = window.innerHeight * 0.6;
      } catch (e) {
        console.error('计算高度失败:', e);
        swiperHeight.value = 400;
      }
    };

    const loadExhibitions = async () => {
      if (noMore.value || loading.value) return;
      loading.value = true;
      
      try {
        // 这里替换为实际的API请求
        const response = await fetch(`http://101.35.16.219:9999/v2/exview/getExviewList?page=${page.value}&pageSize=10`);
        const data = await response.json();
        
        if (data && data.data) {
          const newExhibitions = data.data.map(item => ({
            id: item.id || 0,
            name: item.name || '未命名展览',
            cover: item.cover || '/static/exhibition/default.jpg',
            category: item.category || '暂无描述',
            activityTime: item.activityTime || '日期待定'
          }));
          
          exhibitions.value = [...exhibitions.value, ...newExhibitions];
          
          if (newExhibitions.length < 10) {
            noMore.value = true;
          }
          page.value++;
        }
      } catch (err) {
        console.error('获取展览数据失败:', err);
      } finally {
        loading.value = false;
      }
    };

  //   const navigateToDetail = (id) => {
  //     router.push(
		// `/detail/${id}`
		
	 //  );
	  
  //   };
	const navigateToDetail = (id) => {
	  // 方式1：使用命名路由（推荐）
	  router.push({
	    name: 'ExhibitionList',  // 确保与路由配置中的name一致
	    params: { id }
	  })
	 
	  // 或者方式2：使用路径格式
	  // router.push(`/detail/${id}`)
	}
    const handleImageError = (e) => {
      console.error('图片加载失败:', e);
      if (e.target) {
        e.target.src = '/static/exhibition/default.jpg';
      }
    };

    onMounted(() => {
      calculateSwiperHeight();
      loadExhibitions();
    });

    return {
      swiperHeight,
      banners,
      exhibitions,
      loading,
      noMore,
      loadExhibitions,
      navigateToDetail,
      handleImageError
    };
  }
};
</script>

<style scoped>
.exhibition-container {
  display: flex;
  flex-direction: column;
  height: auto;
}

.exhibition-swiper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text-below {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
}

.chinese-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.english-title {
  font-size: 16px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.chinese-subtitle {
  font-size: 16px;
  margin-bottom: 5px;
}

.english-subtitle {
  font-size: 12px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.exhibition-info {
  margin-top: 10px;
}

.date, .location {
  font-size: 12px;
  margin-top: 3px;
}

.exhibition-list {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.exhibition-item {
  display: flex;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.exhibition-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.exhibition-info {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.description {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.duration {
  font-size: 12px;
  color: #999;
}
</style>